$fontSize_14: 0.8vw;
$fontSize_16: 0.9vw;
$fontSize_18: 1vw;
$fontSize_22: 1.1vw;
$fontSize_24: 1.26vw;
$fontSize_28: 1.3vw;
$fontSize_32: 1.4vw;
$fontSize_36: 1.8vw;
$fontSize_40: 2.1vw;
$fontSize_48: 2.5vw;
$fontSize_50: 2.6vw;
$fontSize_54: 2.7vw;
$fontSize_64: 3.2vw;
$fontSize_70: 3.5vw;
$fontSize_90: 4.5vw;
$fontSize_100: 5vw;
$fontSize_200: 10vw;
$f: 19.2;

.home {
  position: relative;
  width: 100%;
  padding-top: 8vw;

  .section1 {
    margin: 4vw 15vw ;
    display: flex;
    justify-content: space-between;
    transform: scale(.95);
    .l {
      width: 47%;

      img {
        width: 100%;
        object-fit: contain;
        transition: all 600ms;
      }
      &:hover{
        img{
          transform: scale(1.05);
        }
      }
    }

    .r {
      width: 48%;

      .t {
        color: #6456A3;
        font-size: $fontSize_50;
        font-style: italic;
        text-transform: capitalize;
        font-family: 'Newsreader';
        line-height: 1.2;
      }

      .des {
        color: #999BB0;
        font-family: Montserrat;
        font-size: $fontSize_24;
        font-style: italic;
        line-height: 1.6;
        margin: 3vw 0 5vw 0;
        font-family: 'Montserrat-Light';
        p{
          font-family: 'Montserrat-Light';
        }
      }

      .sz {
        border-radius: 50/$f+vw;
        border: 5/$f+vw solid #DCD4E8;
        display: flex;
        justify-content: center;
        width: 70%;
        align-items: center;
        padding: 0.5vw 0;

        .num {
          display: flex;

          p {
            color: #7C67D8;
            font-size: $fontSize_64;
            font-weight: 700;
          }
        }

        .tag {
          color: #6456A3;
          font-size: $fontSize_22;
          font-family: 'Montserrat-Regular.otf';
          margin-left: 15%;
        }
      }
    }
  }

  .section2 {
    margin: 0 15vw;
    transform: scale(.95);
    .t {
      color: #6456A3;
      font-size: $fontSize_48;
      font-weight: 600;
      font-family: 'Montserrat-Regular.otf';
      text-align: center;
      text-transform: capitalize;
    }

    .list {
      border-radius: 120/$f+vw;
      background: #F7F6FA;
      margin-top: 3vw;
      padding: 5vw 0;
      .item {
        border-radius: 20/$f+vw;
        border: 4/$f+vw dashed #999BB0;
        background: #FFF;
        width: 70%;
        margin: 0 auto 3vw auto;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 2vw 5%;
        .l{
          width: 40%;
          .st{
            color: #6456A3;
            font-size: $fontSize_36;
            font-style: italic;
            font-family: 'Newsreader';
          }
          .des{
            color: #9FA1B5;
            font-size: $fontSize_24;
            font-style: italic;
            font-family: 'Montserrat-Light';
            line-height: 1.5;
            margin-top: 0.2vw;
            p{
              font-family: 'Montserrat-Light';
            }
          }
        }
        .r{
          width: 30%;
          .icon{
            position: relative;
            width: fit-content;
            float: right;
            img{
              max-width: 100%;
              object-fit: contain;
            }
            .step{
              border: 6/$f+vw solid #6456A3;
              width: 80/$f+vw;
              height: 80/$f+vw;
              border-radius: 50%;
              background-color: rgba(255,255,255,.8);
              display: flex;
              align-items: center;
              flex-direction: column;
              justify-content: center;
              position: absolute;
              right:-3vw;
              top:-1vw;
              .p1{
               color: #6456A3;
               font-size: $fontSize_22;
               font-family: 'Montserrat-Regular.otf';
               font-weight: 700;
              }
              .p2{
               color: #6456A3;
               font-size: $fontSize_40;
               font-family: 'Montserrat-Regular.otf';
               font-weight: 700;
              }
           }
          }
        }
      }
      .item:last-child{
        margin-bottom: 0;
      }
      .item:nth-child(3){
        .r{
          .icon{
            .step{
              right:3.5vw;
            }
          }
        }
      }
      .item:nth-child(5){
        .r{
          .icon{
            .step{
              right:-1vw;
            }
          }
        }
      }
      .item:nth-child(2n){
        flex-direction: row-reverse;
        .r{
          .icon{
           float: left;
          }
        }
      }
    }
  }

  .section3{
    margin: 3vw 15vw;
    transform: scale(.95);
    .t{
      color: #6456A3;
      text-align: center;
      font-size: $fontSize_48;
      font-weight: 600;
    }
    .list{
      .item{
        margin-top: 3vw;
        .d1{
          color: #6456A3;
          font-size: $fontSize_40;
          font-style: italic;
          font-weight: 700;
          font-family: 'Newsreader';
          text-transform: capitalize;
        }
        .d2{
          color: #A4A6B9;
          font-size: 26/$f+vw;
          font-style: italic;
          font-family: 'Montserrat-Light';
          margin: 1vw 3vw;
          line-height: 1.6;
          p{
            font-family: 'Montserrat-Light';
          }
        }
      }
    }
  }

  .section4 {
    background: #61C0BD;
    text-align: center;
    padding: 5vw 0 3vw 0;

    .t {
      color: #FFF;
      font-size: $fontSize_70;
      font-family: 'Montserrat-Regular.otf';
      text-transform: capitalize;
      line-height: 1.2;
    }

    a {
      display: flex;
      justify-content: center;
      width: fit-content;
      margin: 3vw auto 0 auto;
      align-items: center;

      p {
        font-size: $fontSize_24;
        font-style: italic;
        font-family: 'Newsreader';
        color: white;
        text-transform: capitalize;
      }

      svg {
        display: block;
        margin-top: 0.3vw;
        width: 30/$f+vw;
      }
    }
  }


  @media screen and (max-width: 1367px) {
    .section2{
      .list{
        .item{
          .r{
            .icon{
              img{
                max-width: 80%;
              }
              .step{
                right:0;
              }
            }
          }
        }
        .item:nth-child(3){
          .r{
            .icon{
              .step{
                right: 0;
              }
            }
          }
        }
        .item:nth-child(5){
          .r{
            .icon{
              .step{
                right: 3vw;
              }
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) {
    padding-top: 60px;
    .section1{
      margin: 20px 5% 40px 5%;
      flex-direction: column;
      transform: scale(1);
      .l{
        width: 100%;
      }
      .r{
        width: 100%;
        margin-top: 30px;
        .t{
          font-size: 24px;
        }
        .des{
          font-size: 18px;
          margin: 20px 0 50px 0;
        }
        .sz{
          width: 100%;
          padding: 15px 0;
          border-radius: 50px;
          border: 5px solid #DCD4E8;
          .num{
            p{
              font-size: 32px;
            }
          }
          .tag{
            font-size: 16px;
            margin-left: 10%;
          }
        }
      }
    }
    .section2{
      margin: 0 5%;
      transform: scale(1);
      .t{
        font-size: 24px;
      }
      .list{
        padding: 30px 0;
        margin-top: 30px;
        .item{
          flex-direction: column !important;
          padding: 15px;
          width: calc(90% - 30px);
          margin: 0 auto 15px auto;
          .l{
            width: 100%;
            .st{
              font-size: 24px;
            }
            .des{
              font-size: 16px;
            }
          }
          .r{
            width: 100%;
            margin-top: 20px;
            .icon{
              float: none;
              img{
                width: 80px;
              }
              .step{
                width: 60px;
                height: 60px;
                right:-30px;
                .p1{
                  font-size: 18px;
                }
                .p2{
                  font-size: 16px;
                }
              }
            }
          }
        }
        .item:nth-child(3){
          .r{
            .icon{
              .step{
                right:-30px;
              }
            }
          }
        }
      }
    }
    .section3{
      margin: 30px 5%;
      transform: scale(1);
      .t{
        font-size: 24px;
      }
      .list{
        .item{
          margin-top: 30px;
          .d1{
            font-size: 20px;
          }
          .d2{
            font-size: 16px;
            margin: 10px 30px;
          }
        }
      }
    }
    .section4{
      padding: 40px 0 30px 0;
      .t{
        font-size: 32px;
      }
      a{
        margin: 20px auto 0 auto;
        p{
          font-size: 18px;
        }
        svg{
          width: 25px;
          transform: translateY(2px);
        }
      }
    }
  }
}